<!--平行轴啮合损失-->
<!--目录：润滑 热损失 齿轮功率损失 通用圆柱齿轮功率损失 平行轴齿轮功率损失 平行轴齿轮功率损失-->
<template>
    <div class="sum" style="width: 100%;height: 100%;overflow-x:hidden;overflow-y:hidden">
        <!--总共有二排，这是第一排-->
        <a-row class="row_1" style="height: 28%;width: 98%"><!--wid---->
            <div class="top_all" style="margin-top: 1%">
                <div style="height: 10%;width: 100%;background-color: #D7D7D7;font-size: 18px">
                    目标函数
                </div>
                <div style="height:90%; width:100%; display: flex;">
                    <div style="height: 100%;width: 30%;display: flex">
                      <div style="height: 100%;width: 50%">
                        <ul class="top_left_text">
                            <li>小齿轮齿数</li>
                            <li>大齿轮齿数</li>
                            <li>法向模数（mm）</li>
                            <li>螺旋角（o）</li>
                        </ul>
                      </div>
                      <div style="height: 100%;width: 50%">
                        <ul class="top_left_text" style="text-align: left">
                          <li><input v-model="from1.z_p" type="text" /></li><!--小齿轮齿数-->
                          <li><input v-model="from1.z_w" type="text" /></li><!--大齿轮齿数-->
                          <li><input v-model="from1.normal_module" type="text" /></li><!--法向模数-->
                          <li><input v-model="from1.helix_angle" type="text" /></li><!--螺旋角-->
                        </ul>
                      </div>
                    </div>
                    <div style="height: 100%;width: 40%;display: flex">
                      <div style="height: 100%;width: 50%">
                        <ul class="top_left_text">
                          <li>压力角</li>
                          <li>中心距</li>
                          <li>小齿轮顶圆直径</li>
                          <li>大齿轮顶圆直径</li>
                        </ul>
                      </div>
                      <div style="height: 100%;width: 50%">
                        <ul class="top_left_text" style="text-align: left">
                          <li><input v-model="from1.press_angle" type="text" /></li><!--压力角-->
                          <li><input v-model="from1.work_center" type="text" /></li><!--中心距-->
                          <li><input v-model="from1.x1_c15" type="text" /></li><!--小齿轮顶圆直径-->
                          <li><input v-model="from1.x1_c13" type="text" /></li><!--大齿轮顶圆直径-->
                        </ul>
                      </div>
                    </div>
                    <div style="height: 100%;width: 30%;display: flex">
                      <div style="height: 100%;width: 50%">
                        <ul class="top_right_text">
                          <li>有效齿宽</li>
                          <li>小齿轮实际齿宽</li>
                          <li>大齿轮实际齿宽</li>
                        </ul>
                      </div>
                      <div style="height: 100%;width: 50%">
                        <ul class="top_right_text" style="text-align: left">
                          <li><input v-model="from1.x1_c11" type="text" /></li><!--有效齿宽-->
                          <!--以上的数据已验证-->
                          <!--当pp4:1大齿轮实际齿宽 2:光滑轴长 x2_d10:大齿轮实际齿宽-->
                          <li>
                          <div v-show="from3.pp4==1">
                            <input v-model="from3.x2_d11" type="text" /><!--当pp4:1大齿轮实际齿宽 2:光滑轴长 x2_d10:大齿轮实际齿宽-->
                          </div>
                          <div v-show="from3.pp4==2">
                            <input v-model="from3.x2_d10" type="text" /><!--当pp4:1大齿轮实际齿宽 2:光滑轴长 x2_d10:大齿轮实际齿宽-->
                          </div>
                          </li>
                          <li>
                          <!--当pp3:1小齿轮实际齿宽 2:光滑轴长 x2_d10:小齿轮实际齿宽-->
                          <div v-show="from2.pp3==1">
                           <input v-model="from2.x2_d11" type="text" />
                          </div>
                          <div v-show="from2.pp3==2">
                            <input v-model="from2.x2_d10" type="text" />
                          </div>
                         </li>
                        </ul>
                      </div>
                    </div>
                </div>
            </div>
        </a-row>
        <!--第二排-->
        <a-row class="row_2" style="height: 70%;margin-top: 2%">
          <a-col :span="8" style="height: 90%">
            <div class="middle_box">
              <div style="height:56%;width:100%;">
                <div style="height: 10%;width: 100%;background-color: #D7D7D7;font-size: 18px">平行轴啮合损失</div>
                <div style="height: 90%;width: 100%;padding:2px;border-width:1px;border-style: solid;border-color: rgba(121, 121, 121, 1);border-radius: 8px;">
                  <div style="width: 100%;height: 10%;">输入参数</div>
                  <div style="width: 100%;height: 90%;display: flex;">
                  <div class="middle_text">
                    <ul style="height: 100%;width: 100%">
                      <li>传递功率(kw)</li>
                      <li>小齿轮转速(rpm)</li>
                      <li >润滑油粘度输入方式</li>
                      <div v-show="from1.pp1==1">
                        <li>工作温度(℃)</li>
                        <li>润滑油牌号</li>
                        <li>润滑油工作粘度(mm2/s)</li>
                      </div>
                      <div>
                        <li v-show="from1.pp1==2">润滑油工作粘度(mm2/s)</li>
                      </div>
                      <li>工作螺旋角</li>
                      <li>啮合角（o）</li>
                      <li>小轮节圆直径(mm)</li>
                      <li>大轮节圆直径</li>
                    </ul>
                  </div>
                  <div class="middle_text" style="text-align: left">
                    <ul style="height: 100%;width: 100%;text-align: center">
                      <li><input v-model="from1.x1_c4" type="text"/></li><!--传递功率-->
                      <li><input v-model="from1.x1_c6" type="text"/></li><!--小齿轮转速-->
                      <!--润滑油粘度输入方式-->
                      <li>
                        <select v-model="from1.pp1">
                          <option value="1">自动计算</option>
                          <option value="2">手动输入</option>
                        </select>
                      </li>
                      <div>
                        <div>
                          <!--按照文档，润滑油工作粘度值为x1_c7（输出值）-->
                          <li><input v-show="from1.pp1==1" v-model="from1.dc" type="text"/></li><!--工作温度-->
                          <li>
                            <select v-show="from1.pp1==1" v-model="from1.dd"><!--润滑油牌号1-12-->
                              <option value="1">IOS VG 22</option>
                              <option value="2">IOS VG 32</option>
                              <option value="3">IOS VG 46</option>
                              <option value="4">IOS VG 68</option>
                              <option value="5">IOS VG 100</option>
                              <option value="6">IOS VG 150</option>
                              <option value="7">IOS VG 220</option>
                              <option value="8">IOS VG 320</option>
                              <option value="9">IOS VG 460</option>
                              <option value="10">IOS VG 680</option>
                              <option value="11">IOS VG 1000</option>
                              <option value="12">IOS VG 1500</option>
                            </select>
                          </li>
                          <li v-show="from1.pp1==1">52.5563</li><!--自动计算时，润滑油工作粘度值-->
                        </div>
                        <div>
                          <li><input v-show="from1.pp1==2" v-model="from1.dc" type="text" style="width: 70%"/></li><!--工作温度-->
                        </div>
                      </div>
                      <li>15.0748</li>
                      <li>21.4227</li>
                      <li>189.404</li>
                      <li>910.596</li>
                    </ul>
                  </div>
                </div>
                </div>
              </div>
              <div style="height:4%;width:100%;text-align: right"><button class="comp" @click="geta1">计算</button></div>
              <div style="height:40%;width:100%;padding:2px;border-width:1px;border-style: solid;border-color: rgba(121, 121, 121, 1);border-radius: 8px;">
                <div style="height: 10%;width: 100%">输出参数</div>
                <div style="height: 90%;width: 100%;display: flex">
                  <div class="button_ans">
                    <ul style="height: 100%;width: 100%">
                      <li>线速度(m/s)</li>
                      <li>载荷强度(N/mm2)</li>
                      <li>啮合摩擦系数</li>
                      <li>啮入处的滑动比</li>
                      <li>啮出处的滑动比</li>
                      <li>啮合机械效率系数</li>
                      <li>啮合损失功率(kW)</li>
                    </ul>
                  </div>
                  <div class="button_ans" style="text-align: left">
                    <ul style="height: 100%;width: 100%;text-align: center">
                      <li>{{ans1.x1_c18}}</li>
                      <li>{{ans1.x1_c19}}</li>
                      <li>{{ans1.x1_c20}}</li>
                      <li>{{ans1.x1_c21}}</li>
                      <li>{{ans1.x1_c22}}</li>
                      <li>{{ans1.x1_c23}}</li>
                      <li>{{ans1.x1_c24}}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="8" style="height: 90%">
              <div class="middle_box">
                <div style="height:56%;width:100%;">
                  <div style="height: 10%;width: 100%;background-color: #D7D7D7;font-size: 18px">小齿轮搅油风阻损失</div>
                  <div style="height: 90%;width: 100%;padding:2px;border-width:1px;border-style: solid;border-color: rgba(121, 121, 121, 1);border-radius: 8px;">
                    <div style="width: 100%;height: 10%;">输入参数</div>
                    <div style="width: 100%;height: 90%;display: flex">
                      <div class="middle_text">
                        <ul style="height: 100%;width: 100%">
                          <li >是否浸油</li>
                          <div>
                            <div>
                              <li v-show="from2.pp3==2" style="font-size: 12px">光滑轴长(mm)</li>
                              <li v-show="from2.pp3==2" style="font-size: 12px">轴光滑外径(mm)</li>
                            </div>
                            <div>
                              <li v-show="from2.pp3==1" style="font-size: 12px">小齿轮浸油深度</li>
                              <li v-show="from2.pp3==1" style="font-size: 12px">润滑油工作粘度</li>
                            </div>
                          </div>
                          <li>小齿轮转速(r/min)</li>
                          <li>小齿轮顶圆直径(mm)</li>
                          <li>小齿轮实际齿宽(mm)</li>
                          <li>端面模数(mm)</li>
                          <li>螺旋角(°)</li>
                        </ul>
                      </div>
                      <div class="middle_text" style="text-align: left">
                        <ul style="text-align: center">
                          <li>
                            <select v-model="from2.pp3">
                              <option value="1">是</option>
                              <option value="2">否</option>
                            </select>
                          </li>
                          <div v-show="from2.pp3==2">
                            <li><input v-model="from2.x2_d11" type="text" /></li><!--光滑轴长-->
                            <li><input v-model="from2.x2_d26" type="text" /></li><!--轴光滑外径-->
                          </div>
                          <div v-show="from2.pp3==1">
                            <li><input v-model="from2.x2_d4" type="text" /></li><!--小齿轮浸油深度-->
                            <li>{{ans2.x1_c7}}</li><!--润滑油工作粘度-->
                          </div>
                          <li>{{from1.x1_c6}}</li><!--小齿轮转速-->
                          <li>{{from1.x1_c15}}</li><!--小齿轮顶圆直径-->
                          <div v-show="from2.pp3==1"><!--小齿轮实际齿宽-->
                            <li>{{from2.x2_d11}}</li>
                          </div>
                          <div v-show="from2.pp3==2">
                            <li>{{from2.x2_d10}}</li>
                          </div>
                          <li>{{ans2.tran_module}}</li><!--端面模数-->
                          <li>{{from1.helix_angle}}</li><!--螺旋角-->
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="height:4%;width:100%;text-align: right"><button class="comp" @click="geta2">计算</button></div>
                <div style="height:40%;width:100%;padding:2px;border-width:1px;border-style: solid;border-color: rgba(121, 121, 121, 1);border-radius: 8px;">
                  <div style="height: 10%;width: 100%">输出参数</div>
                  <div style="height: 90%;width: 100%;display: flex">
                    <div class="button_ans">
                      <ul style="height: 100%;width: 100%">
                        <li v-show="from2.pp3==1">浸油系数</li>
                        <li>齿面粗糙度系数</li>
                        <li>齿面功率损失(kw)</li>
                        <li>齿轮侧面功率损失(kw)</li>
                        <li>光滑外表面功率损失(kw)</li>
                        <div>
                          <div>
                            <li v-show="from2.pp3==2">风阻损失(kw)</li>
                          </div>
                          <div>
                            <li v-show="from2.pp3==1">搅油风阻损失(kw)</li>
                          </div>
                        </div>
                      </ul>
                    </div>
                    <div class="button_ans" style="text-align: left">
                      <ul style="height: 100%;width: 100%;text-align: center">
                        <li v-show="from2.pp3==1">{{ans2.x2_d15}}</li><!--pp3=1:浸油系数-->
                        <li>{{ans2.x2_d16}}</li><!--齿轮粗糙度系数-->
                        <li>{{ans2.x2_d18}}</li><!--齿轮功率损失-->
                        <li>{{ans2.x2_d19}}</li><!--齿轮侧面功率损失-->
                        <li>{{ans2.x2_d20}}</li><!--光滑外表面功率损失-->
                        <li>{{ans2.x2_d21}}</li><!--pp3=1:搅油风阻损失-->
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
          <a-col :span="8" style="height: 90%">
              <div class="middle_box">
                <div style="height:56%;width:100%;">
                  <div style="height: 10%;width: 100%;background-color: #D7D7D7;font-size: 18px">大齿轮搅油风阻损失</div>
                  <div style="height: 90%;width: 100%;padding:2px;border-width:1px;border-style: solid;border-color: rgba(121, 121, 121, 1);border-radius: 8px;">
                    <div style="width: 100%;height: 10%;">输入参数</div>
                    <div style="width: 100%;height: 90%;display: flex">
                      <div class="middle_text">
                        <ul style="height: 100%;width: 100%">
                          <li>是否浸油</li>
                          <div>
                            <div >
                              <li v-show="from3.pp4==2" style="font-size: 12px">光滑轴长(mm)</li>
                              <li v-show="from3.pp4==2" style="font-size: 12px">轴光滑外径(mm)</li>
                            </div>
                            <di>
                              <li v-show="from3.pp4==1" style="font-size: 12px">大齿轮浸油深度</li>
                              <li v-show="from3.pp4==1" style="font-size: 12px">润滑油工作粘度</li>
                            </di>
                          </div>
                          <li>大齿轮转速(r/min)</li>
                          <li>大齿轮顶圆直径(mm)</li>
                          <li>大齿轮实际齿宽(mm)</li>
                          <li>端面模数(mm)</li>
                          <li >螺旋角(°)</li>
                        </ul>
                      </div>
                      <div class="middle_text" style="text-align: left">
                        <ul style="text-align: center">
                          <li>
                            <select v-model="from3.pp4">
                              <option value="1">是</option>
                              <option value="2">否</option>
                            </select>
                          </li>
                          <div v-show="from3.pp4==2">
                            <li><input v-model="from3.x2_d11" type="text" /></li><!--光滑轴长-->
                            <li><input v-model="from3.x2_d26" type="text" /></li><!--轴光滑外径-->
                          </div>
                          <div v-show="from3.pp4==1">
                            <li><input v-model="from3.x2_d4" type="text" /></li><!--大齿轮浸油深度-->
                            <li>{{ans3.x1_c7}}</li><!--润滑油工作粘度-->
                          </div>
                          <li>{{from1.x1_c6}}</li><!--大齿轮转速-->
                          <li>{{from1.x1_c13}}</li><!--大齿轮顶圆直径-->
                          <div v-show="from3.pp4==1"><!--大齿轮实际齿宽-->
                            <li>{{from3.x2_d11}}</li>
                          </div>
                          <div v-show="from3.pp4==2">
                            <li>{{from3.x2_d10}}</li>
                          </div>
                          <li>{{ans3.tran_module}}</li><!--端面模数-->
                          <li>{{from1.helix_angle}}</li><!--螺旋角-->
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="height:4%;width:100%;text-align: right"><button class="comp" @click="geta3">计算</button></div>
                <div style="height:40%;width:100%;padding:2px;border-width:1px;border-style: solid;border-color: rgba(121, 121, 121, 1);border-radius: 8px;">
                  <div style="height: 10%;width: 100%">输出参数</div>
                  <div style="height: 90%;width: 100%;display: flex">
                    <div class="button_ans">
                      <ul style="height: 100%;width: 100%">
                        <li v-show="from3.pp4==1">浸油系数</li>
                        <li>齿面粗糙度系数</li>
                        <li>齿面功率损失(kw)</li>
                        <li>齿轮侧面功率损失(kw)</li>
                        <li>光滑外表面功率损失(kw)</li>
                        <div>
                          <div>
                            <li v-show="from3.pp4==2">风阻损失(kw)</li>
                          </div>
                          <div>
                            <li v-show="from3.pp4==1">搅油风阻损失(kw)</li>
                          </div>
                        </div>
                      </ul>
                    </div>
                    <div class="button_ans" style="text-align: left">
                      <ul style="text-align: center">
                        <li v-show="from3.pp4==1">{{ans3.x2_d15}}</li><!--pp4=1:浸油系数-->
                        <li>{{ans3.x2_d16}}</li><!--齿轮粗糙度系数-->
                        <li>{{ans3.x2_d18}}</li><!--齿轮功率损失-->
                        <li>{{ans3.x2_d19}}</li><!--齿轮侧面功率损失-->
                        <li>{{ans3.x2_d20}}</li><!--光滑外表面功率损失-->
                        <li>{{ans3.x2_d21}}</li><!--pp4=1:搅油风阻损失-->
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import {pingxingzhouniehesunshi,xiaochilunjiaoyousunshi,dachilunjiaoyousunshi} from "@/api/file";


    export default {
        created(){
          document.title='平行轴齿轮功率损失'
        },
        name: "pingxingzhouniehesunshi",
        data(){
            return{
                //一般这里是要封装在一个对象里面的，
                //平行轴

                from1:{//已验证：from、ans参数及含义
                    z_p:26,//小齿轮齿数
                    z_w:125, //大齿轮齿数
                    normal_module:7, //法向模数 (mm)
                    helix_angle:15, //螺旋角 (°)
                    press_angle:20, //压力角 (°)
                    work_center:550, //中心距 (mm)
                    pp1:1, //润滑油粘度输入方式（下拉选项）1- 自动计算；2-手动输入
                    dd:8, //润滑油牌号（下拉选项）1-12
                    dc:76.6, //工作温度 (℃)
                    x1_c4:2283, //传递功率 (kW)
                    x1_c6:1500, //小齿轮转速 (rpm)
                    x1_c11:175, //有效齿宽 (mm)
                    x1_c13:920.9062, //大齿轮顶圆直径 (mm)
                    x1_c15:207.1971, //小齿轮顶圆直径 (mm)
                },
                ans1:{
                    x1_c18:"Text",
                    x1_c19:"Text",
                    x1_c20:"Text",
                    x1_c21:"Text",
                    x1_c22:"Text",
                    x1_c23:"Text",
                    x1_c24:"Text",
                },
                //小齿轮
                from2:{//已验证：from、ans参数及含义
                    z_p:26, //小齿轮齿数
                    z_w:125, //大齿轮齿数
                    normal_module:7, //法向模数 (mm)
                    helix_angle:15, //螺旋角 (°)
                    press_angle:20, //压力角 (°)
                    work_center:550, //中心距 (mm)
                    pp3:2, //是否浸油（下拉选项）1-是；2否
                    dd:8, //润滑油牌号1-12
                    dc:76.6, //工作温度 (℃)
                    x2_d9:52.5563, //润滑油工作粘度(mm2/s)
                    x2_d10:207.1971, //pp3=1:小齿轮顶圆直径 pp3=2:小齿轮实际齿宽
                    x2_d4:122, //小齿轮转速 pp3=1:小齿轮浸油深度（mm）
                    x2_d11:122, //pp3=1:小齿轮实际齿宽 (mm) pp3=2:光滑轴长
                    x2_d8:1500, //pp3=1:小齿轮转速 (rpm) pp3=2:小齿轮顶圆直径
                    x2_d26:100, //pp3=2:轴光滑外径（mm）
                    pp1:1, //润滑油粘度输入方式（下拉选项）1- 自动计算；2-手动输入

                },
                ans2:{
                    x1_c7:"Text",//润滑油工作粘度
                    tran_module:"Text",//端面模数
                    x2_d15:"Text",//pp3=1:浸油系数
                    x2_d16:"Text",//齿面粗糙度系数
                    x2_d18:"Text",//齿面功率损失
                    x2_d19:"Text",//齿轮侧面功率损失
                    x2_d20:"Text",//光滑外表面功率损失
                    x2_d21:"Text",//pp3=1:风阻损失，pp3=2:搅油风阻损失

                },
                //大齿轮
                from3:{//已验证：from、ans参数及含义
                    z_p:26, //小齿轮齿数
                    z_w:125, //大齿轮齿数
                    normal_module:7, //法向模数
                    helix_angle:15, //螺旋角
                    press_angle:20, //压力角
                    work_center:550, //中心距
                    pp4:2, //是否浸油（下拉选项）1-是；2否
                    dd:8, //润滑油牌号1-12
                    pp1:1, //润滑油粘度输入方式（下拉选项）1- 自动计算；2-手动输入
                    dc:76.6, //工作温度
                    x2_d10:175, //pp4=1:大齿轮顶圆直径,pp4=2:大齿轮实际齿宽
                    x2_d4:1500, //pp4=1:大齿轮浸油深度,pp4=2:小齿轮转速
                    x2_d8:920.9062, //pp4=1:小齿轮转速,pp4=2:大齿轮顶圆直径
                    x2_d11:185, //pp4=1:大齿轮实际齿宽,pp4=2:光滑轴长
                    x2_d26:200, //pp4=2:轴光滑外径

                },
                ans3:{
                    x1_c7:"Text",//润滑油工作粘度
                    tran_module:"Text",//端面模数
                    x2_d15:"Text",//pp4=1:浸油系数
                    x2_d16:"Text",//齿面粗糙度系数
                    x2_d18:"Text",//齿面功率损失
                    x2_d19:"Text",//齿轮侧面功率损失
                    x2_d20:"Text",//光滑外表面功率损失
                    x2_d21:"Text"//pp4=1:风阻损失,pp4=2:搅油风阻损失
                },


            };
        },
        methods:{
            geta1(){
                //这个括号里面可以传参，一般就是传你this.form的内容
                pingxingzhouniehesunshi(this.from1)
                    .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                        console.log(res);
                        this.ans1.x1_c18=res[6];
                        this.ans1.x1_c19=res[7];
                        this.ans1.x1_c20=res[8];
                        this.ans1.x1_c21=res[9];
                        this.ans1.x1_c22=res[10];
                        this.ans1.x1_c23=res[11];
                        this.ans1.x1_c24=res[12];
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            geta2(){
                //这个括号里面可以传参，一般就是传你this.form的内容
                xiaochilunjiaoyousunshi(this.from2)
                    .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                        console.log(res);
                        this.ans2.tran_module=res[1];//
                        this.ans2.x2_d15=res[2];
                        this.ans2.x2_d16=res[3];
                        this.ans2.x2_d18=res[4];
                        this.ans2.x2_d19=res[5];
                        this.ans2.x2_d20=res[6];
                        this.ans2.x2_d21=res[7];

                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            geta3(){//已检验：参数、含义、对应关系均正确

                dachilunjiaoyousunshi(this.from3)
                    .then(res => {
                        console.log(res);
                        //这两个输出参数显示在输入参数中
                        this.ans3.x1_c7=res[0];//润滑油工作粘度
                        this.ans3.tran_module=res[1];//端面模数


                        this.ans3.x2_d15=res[2];//pp4=1:浸油系数
                        this.ans3.x2_d16=res[3];//齿面粗糙度系数
                        this.ans3.x2_d18=res[4];//齿面功率损失
                        this.ans3.x2_d19=res[5];//齿轮侧面功率损失
                        this.ans3.x2_d20=res[6];//光滑外表面功率损失
                        this.ans3.x2_d21=res[7];//pp4=1:风阻损失,pp4=2:搅油风阻损失

                        /*//你也可以不检验，这个状态码一般是检验后端数据有没有异常，res就是返回结果的整个大的对象
                        if (res.code === 200) {
                            console.log(res.data);
                            //然后再把这里面的数据放到你绑定的对象动态改变值即可
                            this.ans3 = res.data;
                        }*/
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
        }
    }
</script>

<style scoped>
    .top_all{
        width: 100%;
        height: 100%;
        margin-left: 8px;
        margin-right: 8px;
        box-shadow: 1.5px 1.5px 2px #aaaaaa;
        border-radius: 3px;
        border: 0.5px solid rgba(231,231,231,0.486);
    }
    .top_left_text
    {
      height: 90%;
      width: 90%;
      text-align: right;
      margin-top: 5%;
    }
    .top_left_text li
    {
      width: 100%;
      height: 25%;
    }
    .top_left_text input
    {
      width: 50%;
      height: 50%;
    }
    .top_right_text
    {
      height: 90%;
      width: 90%;
      text-align: right;
      margin-top: 5%;
    }
    .top_right_text li
    {
      width: 100%;
      height: 30%;
    }
    .top_right_text input
    {
      width: 50%;
      height: 50%;
    }
    .middle_box
    {
      margin-left: 8px;
      margin-right: 8px;
      box-shadow: 1.5px 1.5px 2px #aaaaaa;
      border-radius: 3px;
      border: 0.5px solid rgba(231,231,231,0.486);
      width: 95%;
      height: 100%;
    }
    .middle_text
    {
      width: 45%;
      height: 100%;
      text-align: right;
    }
    .middle_text li
    {
      width: 90%;
      height: 10%;
    }
    .middle_text input
    {
      width: 60%;
      height: 100%;
    }
    .middle_text select
    {
      width: 60%;
      height: 100%;
    }
    .button_ans
    {
      width: 45%;
      height: 100%;
      text-align: right;
    }
    .comp
    {
      height: 100%;
    }
</style>